import React, { useEffect } from 'react';
import { useIntl } from 'umi';
import {
  Button,
  Col,
  Drawer,
  Select,
  Form,
  Input,
  Space,
  Row,
  Cascader,
  Upload,
  Alert,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { isEmpty } from 'lodash';
import * as publicData from '../../utils/staticData';

const AddInformationBeneficiaries: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const { onClose, open, echoData, addflag } = props;

  // console.log("addflag", addflag);

  const [form] = Form.useForm();

  const { Option } = Select;
  const { SHOW_CHILD } = Cascader;

  // 远程搜索地区银行识别码
  const options = [
    {
      value: '0011',
      label: '国库',
    },
    {
      value: '003',
      label: '渣打银行（香港）有限公司',
    },
    {
      value: '004',
      label: '香港上海汇丰银行有限公司',
    },
    {
      value: '005',
      label: '东方汇理银行',
    },
    {
      value: '006',
      label: '东方汇理银行',
    },
    {
      value: '007',
      label: '东方汇理银行',
    },
    {
      value: '008',
      label: '东方汇理银行',
    },
  ];

  const uploadButton = (
    <>
      <Button icon={<UploadOutlined />}>上传文件</Button>
    </>
  );

  // 远程搜索关键字查询
  const filter = (inputValue, path) =>
    path.some(
      (option) =>
        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
    );

  // 提交表单
  const handleSubmit = () => {
    const formSubmitData = form.getFieldsValue();
  };

  const titleDom = () => {
    if (addflag == 1) {
      return <span>{t('form.Informationbeneficiaries')}</span>;
    } else {
      return <span>{t('form.Modifybeneficiaryinformation')}</span>;
    }
  };

  // 回显开关
  let flag = _.isEmpty(echoData);

  // 数据回显;
  //   useEffect(() => {
  //     if (!flag) {
  //       form.setFieldsValue({
  //         ...echoData,
  //       });
  //     }
  //   }, [flag, echoData]);

  return (
    <Drawer
      title={addflag == 1 ? '新增受益人信息' : '修改受益人信息'}
      //   title={titleDom()}
      width={920}
      onClose={() => {
        onClose(false);
        form.resetFields();
      }}
      open={open}
      bodyStyle={{
        paddingBottom: 80,
      }}
      footer={
        <Space>
          <Button
            onClick={() => {
              form.resetFields();
            }}
          >
            重置
            {/* {t('buttons.Reset')} */}
          </Button>
          <Button
            onClick={() => {
              onClose(false);
              handleSubmit();
              form.resetFields();
            }}
            type="primary"
          >
            提交
            {/* {t('buttons.confirm')} */}
          </Button>
        </Space>
      }
    >
      <Alert
        // message={t('message.beneficiaryInformation')}
        message="账户名称+开户行地址不可超过114个字符（只允许英文字母数字空格.,/-()'），否则可能导致境外银行付款失败"
        type="warning"
        showIcon
        style={{ marginBottom: '10px' }}
      />
      <Form form={form}>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="Identification"
              label={t('form.BankCountry')}
              // label="银行所在国家"
              //   tooltip={t('form.BankCountryMessage')}
              tooltip="系统会根据所选国家判断境内/境外账户"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Cascader
                options={options}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
                showSearch={{
                  filter,
                }}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="url"
              // label="客户类型"
              label={t('form.Customertype')}
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select allowClear>
                <Option value="private">对私</Option>
                <Option value="public">对公</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="Identification"
              label={t('form.CustomerCountry')}
              // label="客户所在国家"
              rules={[
                {
                  required: true,
                  // message: "客户所在国家",
                },
              ]}
            >
              <Cascader
                options={options}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
                showSearch={{
                  filter,
                }}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="type"
              // label="币种"
              label={t('form.currency')}
              rules={[
                {
                  required: true,
                  // message: "请选择币种",
                },
              ]}
            >
              <Select allowClear>
                <Option value="private">对私</Option>
                <Option value="public">对公</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="name"
              label="账户名称"
              //   label={t('form.accountTitle')}
              validateStatus="error"
              help="非国内账户只允许英文字母数字空格"
              //   help={t('message.accountTitleHelp')}
              rules={[
                {
                  required: true,
                  // message: "请输入账户名称",
                },
              ]}
            >
              <Input allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="currency"
              //   label={t('form.AccountNoAdd')}
              label="账户账号（欧美地区IBAN）"
              rules={[
                {
                  required: true,
                  // message: "请输入账户账号",
                },
              ]}
            >
              <Input allowClear />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="city"
              //   label={t('form.AccountType')}
              label="账户类型"
              rules={[
                {
                  required: true,
                  // message: "请输入账户类型",
                },
              ]}
            >
              <Cascader
                options={publicData.cityData}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="CardType"
              label="合作有效期"
              //   label={t('form.Validitycooperation')}
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select allowClear>
                {publicData.CardType.map((district) => (
                  <Option key={district.value}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="largeAmount"
              //   label={t('form.IdentificationNumber')}
              label="证件号码"
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="swiftcode"
              label="银行名称"
              //   label={t('form.Bankname')}
              rules={[
                {
                  required: true,
                  // message: "请输入银行名称",
                },
              ]}
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
                // placeholder="请输入银行名称"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="transferAmount"
              label="支付行号"
              //   label={t('form.PaymentbankNo')}
            >
              <Select allowClear>
                {publicData.CardType.map((district) => (
                  <Option key={district.value}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="detailAddress"
              label="SWIFTCODE"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="transferAmount"
              //   label={t('form.changetrainsShops')}
              label="中转行支付行号"
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
                // placeholder="请输入中转行支付行号"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="detailAddress"
              label="开户银行地址"
              //   label={t('form.Addressdepositbank')}
              rules={[
                {
                  //   required: true,
                  // message: "请输入详细地址",
                },
              ]}
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
                // placeholder="请输入开户银行地址"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="transferAmount"
              //   label={t('form.Customeraddress')}
              label="客户地址"
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
                // placeholder="请输入客户地址"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="detailA2ddress"
              //   label={t('form.PhoneinJapan')}
              label="联系电话(日本必填)"
              rules={[
                {
                  required: true,
                  // message: "请输入联系电话",
                },
              ]}
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
                // placeholder="请输入联系电话"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="accountCountry"
              validateStatus="error"
              //   help={t('form.uploadhelp')}
              help="上传材料不得超过8M"
              rules={[
                {
                  required: true,
                },
              ]}
              //   label={t('form.upload')}
              label="上传材料"
            >
              <Upload
                name="avatar"
                //   listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                //   beforeUpload={beforeUpload}
                //   onChange={handleChange}
              >
                {uploadButton}
              </Upload>
            </Form.Item>
          </Col>
          <Col span={12}></Col>
        </Row>
      </Form>
    </Drawer>
  );
};

export default AddInformationBeneficiaries;
